<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
  .v-link-active {
    color: red;
  }
  .active {
    font-weight: bold;
  }
  </style>
</head>
<body>
  <div id="app">
    <div>
      <a v-link="{path: '/home', activeClass: 'active'}">Home</a>
      <a v-link="{path: '/about', activeClass: 'active'}">About</a>
      <router-view></router-view>
    </div>
    <div class="well">
      {{{msg}}}
    </div>
  </div>
  <template id="home">
    <div>
      <h1>Home</h1>
      <p>{{msg}}</p>
    </div>
    <div>
      <ul class="nav nav-tabs">
        <li :class="path == '/home/news' ? 'active': ''">
          <a v-link="{ path: '/home/news'}">News</a>
        </li>
        <li :class="path == '/home/message' ? 'active': ''">
          <a v-link="{ path: '/home/message'}">Messages</a>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </template>

  <template id="about">
    <div>
      <h1>About</h1>
      <p>This is the tutorial about vue-router.</p>
    </div>
  </template>

  <template id="news">
    <div>
      <ul>
        <li>News 01</li>
        <li>News 02</li>
        <li>News 03</li>
      </ul>
    </div>
  </template>
  <template id="message">
    <ul>
      <li>Message 01</li>
      <li>Message 02</li>
      <li>Message 03</li>
    </ul>
  </template>
  <script src="js/vue.js" charset="utf-8"></script>
  <script src="js/vue-router.min.js" charset="utf-8"></script>
  <script type="text/javascript">

    var well = new Vue({
      el: '.well',
      data: {
        msg: '',
        color: '#ff0000'
      },
      methods: {
        setColor: function(){
          this.color = '#' + parseInt(Math.random()*256).toString(16)
          + parseInt(Math.random()*256).toString(16)
          + parseInt(Math.random()*256).toString(16)
        },
        setColoredMessage: function(msg){
          this.msg +=  '<p style="color: ' + this.color + '">' + msg + '</p>'
        },
        setTitle: function(title){
          this.msg =  '<h2 style="color: #333">' + title + '</h2>'
        }
      }
    });

    function RouteHelper(name) {
      var route = {
        canReuse: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
          return true;
        },
        canActivate: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
          transition.next()
        },
        activate: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
          transition.next()
        },
        canDeactivate: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
          transition.next()
        },
        deactivate: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
          transition.next()
        },
        data: function(transition) {
          well.setColoredMessage('执行组件' + name + '的钩子函数:data')
          transition.next()
        }
      }
      return route;
    }

    var Home = Vue.extend({
      template: '#home',
      data: function() {
        return {
          msg: 'Hello, vue router!',
          path: ''
        }
      },
      route: RouteHelper('Home')
    })

    var News = Vue.extend({
      template: '#news',
      route: RouteHelper('News')
    })

    var Message = Vue.extend({
      template: '#message',
      route: RouteHelper('Message')
    })

    var About = Vue.extend({
      template: '#about',
      route: RouteHelper('About')
    })

    var router = new VueRouter();
    router.redirect({
      '/': '/home'
    });
    router.map({
      '/home': {
        component: Home,
        subRoutes: {
          '/news': {
            component: News
          },
          '/message': {
            component: Message
          }
        }
      },
      '/about': {
        component: About
      }
    })

    //路由切换开始时调用
    router.beforeEach(function(transition) {
			well.setColor()
			well.setTitle('跳转路径<span class="text-danger">[from = ' + transition.from.path + '], [to = ' + transition.to.path + ']</span>')
			well.setColoredMessage('执行router的全局函数:beforeEach')
			transition.next()
		})

    //每次路由切换成功进入激活阶段时调用
		router.afterEach(function(transition) {
			well.setColoredMessage('执行router的全局函数:afterEach')
		})

    var App = Vue.extend({});
    router.start(App, '#app');

  </script>
</body>
</html>
